<template>
  <div id="result">
    <el-page-header @back="goBack" content="搜索结果" style="margin-left: 15%"></el-page-header>
    <search style="float: left; margin-left: 22%"/>
    <el-radio-group v-model="searchGoodsWant" class="btn" @change="btnChange">
      <el-radio-button label="g">商品帖</el-radio-button>
      <el-radio-button label="w">求购帖</el-radio-button>
    </el-radio-group>
    <div class="container">
      <ul>
        <li v-for="(items, index) in ulData.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="items.goodsWant.goodsWantInfo" class="items">
          <div class="picture"><a href='javascript:void(0)' @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)"><img :src="items.goodsWant.goodsWantImage" alt=""></a></div>
          <div class="items_detail">
            <div class="price"><strong>￥{{items.goodsWant.goodsWantPrice}}</strong><span>{{items.goodsWant.browsedCount}}人浏览</span></div>
            <div class="detail"><a href='javascript:void(0)' @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)">{{items.goodsWant.goodsWantInfo}}</a></div>
            <div style="padding: 0 5px">
              <i v-if="searchGoodsWant === 'g'" class="el-icon-shopping-cart-2" title="点击添加购物车" style="float: left; cursor: pointer" @click="cartClick(items.goodsWant.goodsWantId)"></i>
              <!-- <i class="el-icon-collection" title="点击添加收藏" style="float: right; cursor: pointer" @click="collectionClick"></i> -->
              <i v-if="!!!items.favoriteId" class="el-icon-collection" title="点击添加收藏" style="float: right; cursor: pointer" @click="collectionClick(items.goodsWant.goodsWantId, items.favoriteId, index)"></i>
              <i v-else class="el-icon-collection" title="点击取消收藏" style="float: right; cursor: pointer; color: red" @click="collectionClick(items.goodsWant.goodsWantId, items.favoriteId, index)"></i>
            </div>
          </div>
        </li>
      </ul>
      <el-pagination background @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" 
                :page-size="pagesize"  layout="total, prev, pager, next, jumper"  :total="ulData.length" prev-text="上一页" 
                next-text="下一页" style="text-align: center; position: absolute; bottom: 20px; left: 480px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {request} from '@/network/request'
import search from '@/components/home/search/search'


export default {
  data() {
    return {
      searchGoodsWant: 'g',
      // 默认显示页面为1
      currentPage: 1, 
      // 每页的数据条数
      pagesize: 15, 
      ulData: [
        { favoriteId: '', goodsWant: {goodsWantImage: '', goodsWantPrice: '', browsedCount: '', goodsWantInfo: '', goodsWantId: '', goodsWant: ''}},
      ]
    }
  },
  computed: {
    // queryKeyword() {
    //   return this.$store.state.queryKeyword
    // },
    // // 单选框有v-model，使用计算属性时会改变计算属性，所以需要设置setter函数
    // searchGoodsWant: {
    //   get() {
    //     return this.$store.state.searchGoodsWant
    //   },
    //   set(value) {
    //     this.$store.commit('changeSearchGoodsWant', value)
    //   }
    // }
  },
  components: {
    search 
  },
  mounted() {
  // 跳转到此页面后，向服务器发送queryKeyword和searchGoodsWant
    let obj = JSON.stringify({
      queryKeyword: this.$store.state.queryKeyword,
      goodsWant: this.searchGoodsWant,
      userId: this.$store.state.userId
    })
    request({
      url: '/goods-want/searchGoods',
      method: 'post',
      data: obj
    }).then(res => {
      // console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    // 点击商品帖或求购帖时，向服务器发送queryKeyword和searchGoodsWant
    btnChange(value) {
      // console.log(value);
      // this.$store.commit('changeSearchGoodsWant', value)
      this.searchGoodsWant = value
      let obj = JSON.stringify({
        queryKeyword: this.$store.state.queryKeyword,
        // goodsWant: this.$store.state.searchGoodsWant
        goodsWant: this.searchGoodsWant,
        userId: this.$store.state.userId
      })
      request({
        url: '/goods-want/searchGoods',
        method: 'post',
        data: obj
      }).then(res => {
        this.ulData = res.data.data.items
      }).catch(err => {
        console.log(err);
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    //每页下拉显示数据
    handleSizeChange(size) {
      this.pagesize = size;
      /*console.log(this.pagesize) */
    },
    //点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    cartClick(goodsWantId) {
      if(!this.$store.state.isLogin) {
        alert('您还未登录，请先登录！！')
        this.$router.push('/login')
      } else {
        // 点击添加购物车，向服务器发送请求
        let obj = JSON.stringify({
          goodsWantId,
          needCount: 1,
          userId: this.$store.state.userId
        })
        request({
          url: '/shoppingcart/addToCart',
          method: 'post',
          data: obj
        }).then(res => {
          console.log(res);
          this.$message({
            message: '添加购物车成功！',
            type: 'success'
          })
        }).catch(err => {
          console.log(err);
        })
      }
    },
    collectionClick(goodsWantId, favoriteId, index) {
      if(!this.$store.state.isLogin) {
        alert('您还未登录，请先登录！！')
        this.$router.push('/login')
      } else {
        // 点击收藏，向服务器发送请求
        let favorite = JSON.stringify({
          goodsWantId,
          userId: this.$store.state.userId
        })
        request({
          url: '/favorite/addToFavorite',
          method: 'post',
          data: favorite
        }).then(res => {
          // console.log(res);
          if(res.data.flag) {
            // 未收藏时显示添加收藏成功
            if(!!!favoriteId) {
              this.$message({
                message: '添加收藏成功！',
                type: 'success'
              })
              this.ulData[index].favoriteId = '1'
            // 收藏时显示取消收藏成功
            } else {
              this.$message({
                message: '取消收藏成功！',
                type: 'success'
              })
              this.ulData[index].favoriteId = ''
            }
          }
          // 重新请求数据，更新页面数据
          // let obj = JSON.stringify({
          //   queryKeyword: this.$store.state.queryKeyword,
          //   goodsWant: this.searchGoodsWant,
          //   userId: this.$store.state.userId
          // })
          // request({
          //   url: '/goods-want/searchGoods',
          //   method: 'post',
          //   data: obj
          // }).then(res => {
          //   // console.log(res);
          //   this.ulData = res.data.data.items
          // }).catch(err => {
          //   console.log(err);
          // })
        }).catch(err => {
          console.log(err);
        })
      }
    },
    goodsClick(goodsWantId, goodsWant) {
      // 点击商品图片或文字，跳转到商品详情页面
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      this.$router.push('/goodsDetail')
    }
  }
}
</script>

<style scoped>
  #result .container {
    width: 70%;
    /* height: 1000px; */
    margin: 0 auto;
    border: 1px solid #000;
    padding-bottom: 60px;

    clear: both;
    position: relative;
  }

  #result .btn {
    float: left;
    margin-top: 35px;
    margin-left: -80px;
  }

  #result .container ul {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }

  #result .container .items {
    width: 250px;
    height: 390px;
    flex: none;
    /* box-sizing: border-box; */
    /* border: 1px solid #000; */
  }

  #result .container .items:not(:nth-child(5n)) {
    /* margin-right: calc((70% - 1250px) / 4); */
    margin-right: calc(6.1% / 4);
  }

  #result .container .items .picture img {
    width: 250px;
    height: 250px;
  }

  #result .container .items .items_detail {
    border: 1px solid #ccc;
    border-top: none;
    /* padding-top: 8px; */
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #result .container .items .items_detail .price {
    color: red;
    padding: 0 5px;
    height: 26px;
    line-height: 26px;
    margin-top: 10px;
  }

  #result .container .items .items_detail i:hover {
    color: red;
  }

  #result .container .items .items_detail .price strong {
    float: left;
  }

  #result .container .items .items_detail .price span {
    float: right;
    color: #888888;
    font-size: 12px;
  }

  #result .container .items .items_detail .detail {
    margin-bottom: 5px;
    height: 50px;
  }

  #result .container .items .items_detail .detail a {
    font-size: 12px;
    text-decoration: none;
    color: inherit;
  }

  #result .container .items .items_detail .detail a:hover {
    color: #f00;
    text-decoration: underline;
  }
</style>